<template>
  <div class="apiRequestLogManagement">
    <MetaSearchForm @on-search="tableSearch">
      <el-form ref="apiRequestLogManagement_form" :model="searchData" label-width="120px" class="apiRequestLogManagement_searchFrom">
        <el-form-item label="用户key" class="apiRequestLogManagement_searchFromItem">
          <el-input v-model="searchData.appKey" placeholder="请输入用户key"></el-input>
        </el-form-item>
      </el-form>
    </MetaSearchForm>
    <MetaPageTable
      ref="apiRequestLogManagementTable"
      class="apiRequestLogManagement_table"
      table-title="接口日志列表"
      :is-auto-req="true"
      :req-url="reqUrl"
      :req-data="searchDataForTable"
      req-method="post"
      :display-item="displayItem"
      :btn-group="btnGroup"
      :line-btn-group="lineBtnGroup"
      @btnClick="tableBtnClick"
      @lineBtnClick="tableInlineBtnClick"
    />
  </div>
</template>


<script>
import MetaPageTable from '../components/MetaPageTable'
import MetaSearchForm from '../components/MetaSearchForm'
import deepClone from '../utils/deepClone'
export default {
  name: 'apiRequestLogManagement',
  components: {
    MetaPageTable,
    MetaSearchForm
  },
  data () {
    return {
      reqUrl: process.env.PROGOO_GATE_WATER + 'apiRequestLog/apiRequestLogList',
      userList: [],
      searchData: {
        appKey: '',
      },
      searchDataForTable: {},
      editRules: {
      },
      displayItem: [
        {
          label: '用户key',
          prop: 'appKey'
        },
        {
          label: '请求接口',
          prop: 'apiName'
        },
        {
          label: '请求ip',
          prop: 'requestIp'
        },
        {
          label: '请求时间',
          prop: 'createTime'
        },
        {
          label: '调用结果',
          prop: 'isSuccess'
        }
      ],
      btnGroup: [
        {
          id: 'delete',
          title: '清空日志',
        },
      ],
      lineBtnGroup: [

      ],
    }
  },
  mounted() {
  },
  methods: {
    tableBtnClick(item) {
      if (item.button === 'delete') {
        this.$confirm('确认清空接口日志?', '清空接口日志', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "apiRequestLog/deleteAll",
            method: "post",
            data: {}
          }).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.$nextTick(() => {
                this.$refs.apiRequestLogManagementTable.formDataInit(true)
              })
            }else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        })
      }
    },
    tableInlineBtnClick(item) {

    },
    tableSearch() {
      let param = {}
      for(let key in this.searchData) {
        param[key] = this.searchData[key]
      }
      this.searchDataForTable = param
      this.$nextTick(() => {
        this.$refs.apiRequestLogManagementTable.formDataInit(true)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.apiRequestLogManagement{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .apiRequestLogManagement_table {
    width: 100%;
    overflow-y: unset;
  }
  .dataDetailsForm_item {
    line-height: normal;
    padding: 8px 0;
  }
  .apiRequestLogManagement_searchFrom {
    width: 100%;
  }
  .apiRequestLogManagement_searchFromItem {
    float: left;
  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
}
</style>
